<!DOCTYPE html>
<html>

<head>
    <!-- 设置字符集和页面标题 -->
    <meta charset="UTF-8">
    <title>My Electron App</title>
    <!-- 内部CSS样式 -->
    <style>
        /* Body样式 */
        body {
            background-color: #333;
            color: white;
            font-family: Arial, sans-serif;
            margin: 0;
            overflow: hidden;
        }

        /* 标题栏样式 */
        .title-bar {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #444;
        }

        /* 标题文字样式 */
        .title {
            font-size: 1.5em;
            flex: 1;
        }

        /* 控制按钮容器 */
        .controls {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-right: 0px;
        }

        /* 控制按钮样式 */
        .controls button {
            background: none;
            border: none;
            color: white;
            font-size: 1.2em;
            cursor: pointer;
        }

        /* 主内容容器 */
        .main-content {
            display: flex;
            height: calc(100vh - 50px);
            /* 根据视窗高度调整 */
            padding: 10px;
            position: relative;
        }

        /* 左侧边栏样式 */
        .sidebar {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            width: 50px;
        }

        /* 边栏按钮样式 */
        .sidebar button {
            background-color: #555;
            border: none;
            color: white;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            margin-left: 10px;
        }

        /* 特定按钮样式 */
        .sidebar button.InputBtn {
            background-color: #777;
        }

        /* 特定按钮样式 */
        .sidebar button.OutputBtn {
            background-color: #777;
        }

        /* 主内容区域 */
        .content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        /* 内容线条样式 */
        .content-line {
            display: flex;
            align-items: center;
            width: 80%;
        }

        /* 按钮容器样式 */
        .hidden-buttons-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 0 50px;
        }

        /* 隐藏的按钮样式 */
        .hidden-button {
            background-color: #555;
            border: none;
            color: white;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            opacity: 0;
            margin-right: 20px;
            margin-bottom: 10px;
            display: flex;
        }

        .hidden-button i {
            margin-right: 5px;
            /* 在图标和文本之间添加一些间距 */
        }

        .sidebar-input li img {
            width: 40px;
            /* 调整图片大小 */
            height: 40px;
            margin-right: 10px;
            /* 在图片和文本之间添加一些间距 */
            vertical-align: middle;
            /* 使图片垂直居中对齐 */
        }

        .hidden-button img {
            width: 50px;
            /* 调整hidden-button中图片的大小 */
            height: 50px;
            /* margin-right: 5px; */
            /* 在图片和文本之间添加一些间距 */
        }

        /* 右侧边栏样式 */
        .sidebar-input {
            position: fixed;
            top: 0;
            right: -350px;
            /* 初始隐藏位置 */
            width: 300px;
            height: 100%;
            background-color: #555;
            transition: right 0.3s;
            /* 右侧边栏动画效果 */
            padding: 20px;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
            overflow-y: auto;
            z-index: 1000;
        }

        /* 可见状态样式 */
        .sidebar-input.visible {
            right: 0;
        }

        /* 右侧边栏列表样式 */
        .sidebar-input ul {
            list-style-type: none;
            padding: 0;
        }

        /* 右侧边栏列表项样式 */
        .sidebar-input li {
            margin: 10px 0;
            padding: 10px;
            background-color: #666;
            border-radius: 5px;
            cursor: pointer;
        }

        /* 右侧边栏按钮样式 */
        .sidebar-right-buttons {
            margin-left: 80px;
            margin-right: 10px;
        }

        /* 连接线条样式 */
        .connection-line {
            position: absolute;
            height: 2px;
            background-color: white;
            z-index: 1;
        }

        /* 添加拖拽样式 */
        .draggable {
            cursor: move;
        }

        .droppable {
            border: 2px dashed #aaa;
        }

        .drag-over {
            opacity: 1 !important;
            transition: opacity 0.3s ease;
        }
    </style>
    <!-- 其他现有的head内容 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

</head>

<body>
    <!-- 标题栏 -->
    <div class="title-bar">
        <div class="title">1E Unsaved*</div>
        <!-- 控制按钮 -->
        <div class="controls">
            <button>⟳</button>
            <button>A</button>
            <button id="toggle-sidebar">☰</button>
        </div>
    </div>
    <!-- 主内容区 -->
    <div class="main-content">
        <!-- 左侧边栏 -->
        <div class="sidebar">
            <button class="InputBtn">+</button>
            <button class="InputBtn">+</button>
            <button class="InputBtn">+</button>
            <button class="InputBtn">+</button>
            <button class="InputBtn">+</button>
        </div>
        <!-- 主内容区 -->
        <div class="content">
            <div class="content-line">
                <!-- 中间隐藏按钮容器 -->
                <div class="hidden-buttons-container">
                    <!-- 第一行按钮 -->
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                    <button class="hidden-button" data-visible="false">+</button>
                </div>

            </div>
        </div>
        <!-- 右侧边栏 -->
        <div class="sidebar sidebar-right-buttons">
            <button class="OutputBtn">+</button>
            <button class="OutputBtn">+</button>
            <button class="OutputBtn">+</button>
            <button class="OutputBtn">+</button>
            <button class="OutputBtn">+</button>
        </div>
        <!-- 连接线条 -->
        <div class="connection-line" id="line1"></div>
        <div class="connection-line" id="line2"></div>
        <div class="connection-line" id="line3"></div>
        <div class="connection-line" id="line4"></div>
        <div class="connection-line" id="line5"></div>
    </div>
    <!-- input侧边栏 -->
    <div class="sidebar-input" id="sidebar-input">
        <ul>
            <li>Input 1</li>
            <li>Input 2</li>
            <li>Input 3</li>
            <li>Input 4</li>
            <li>Input 5</li>
        </ul>
    </div>
    <!-- output侧边栏 -->
    <div class="sidebar-input" id="sidebar-output">
        <ul>
            <li>Output 1</li>
            <li>Output 2</li>
            <li>Output 3</li>
            <li>Output 4</li>
            <li>Output 5</li>
        </ul>
    </div>
    <!-- module侧边栏 -->
    <div class="sidebar-input" id="sidebar-module">
        <ul>
            <li><img src="img/amp.png" alt="AMP"> AMP</li>
            <li><img src="img/cab.png" alt="CAB"> CAB</li>
            <li><img src="img/dly.png" alt="DLY"> DLY</li>
            <li><img src="img/drv.png" alt="DRV"> DRV</li>
            <li><img src="img/eq.png" alt="EQ"> EQ</li>
            <li>DELETE</li>
        </ul>
    </div>

    <!-- 外部脚本 -->
    <script>
        // 获取所有加号按钮
        const plusButtons = document.querySelectorAll('.InputBtn, .OutputBtn');
        let activeButton = null;

        // 为每个加号按钮添加点击事件监听器
        plusButtons.forEach(button => {
            button.addEventListener('click', function (event) {
                activeButton = button; // 记录当前点击的按钮
                const sidebar = button.classList.contains('InputBtn')
                    ? document.getElementById('sidebar-input')
                    : document.getElementById('sidebar-output');
                sidebar.classList.toggle('visible');
                // 阻止点击事件冒泡
                event.stopPropagation();
            });
        });

        // 点击空白区域隐藏侧边栏
        document.addEventListener('click', function (event) {
            const inputSidebar = document.getElementById('sidebar-input');
            const outputSidebar = document.getElementById('sidebar-output');
            const moduleSidebar = document.getElementById('sidebar-module');
            // 判断点击是否发生在侧边栏内部或加号按钮上
            if (!inputSidebar.contains(event.target) && inputSidebar.classList.contains('visible')) {
                inputSidebar.classList.remove('visible');
            }
            if (!outputSidebar.contains(event.target) && outputSidebar.classList.contains('visible')) {
                outputSidebar.classList.remove('visible');
            }
            if (!moduleSidebar.contains(event.target) && moduleSidebar.classList.contains('visible')) {
                moduleSidebar.classList.remove('visible');
            }
        });

        // 防止侧边栏内的点击事件冒泡到文档
        document.getElementById('sidebar-input').addEventListener('click', function (event) {
            event.stopPropagation();
        });
        document.getElementById('sidebar-output').addEventListener('click', function (event) {
            event.stopPropagation();
        });
        document.getElementById('sidebar-module').addEventListener('click', function (event) {
            event.stopPropagation();
        });

        // 为侧边栏中的每个列表项添加点击事件监听器
        document.querySelectorAll('#sidebar-input li, #sidebar-output li').forEach(item => {
            item.addEventListener('click', function () {
                if (activeButton) {
                    activeButton.textContent = this.textContent; // 替换按钮文字
                    activeButton.style.backgroundColor = '#555'; // 替换按钮背景颜色
                    document.getElementById('sidebar-input').classList.remove('visible'); // 隐藏侧边栏
                    document.getElementById('sidebar-output').classList.remove('visible'); // 隐藏侧边栏
                }
            });
        });

        // 获取所有隐藏按钮
        const hiddenButtons = document.querySelectorAll('.hidden-button');

        // 为隐藏按钮添加点击事件监听器
        hiddenButtons.forEach(button => {
            button.addEventListener('click', function (event) {
                // 首先隐藏所有隐藏按钮
                hiddenButtons.forEach(btn => {
                    if (btn.getAttribute('data-visible') != 'true') {
                        btn.style.opacity = '0'; // 隐藏按钮
                        btn.removeAttribute('active'); // 移除激活状态标记
                    }
                });

                // 显示当前点击的按钮
                button.style.opacity = '1'; // 显示按钮
                button.setAttribute('active', 'true'); // 添加激活状态标记

                // 显示 sidebar-module 侧边栏
                document.getElementById('sidebar-module').classList.add('visible');

                // 阻止点击事件冒泡
                event.stopPropagation();
            });
        });

        // 点击空白区域隐藏侧边栏和隐藏按钮
        document.addEventListener('click', function (event) {
            let shouldHideButtons = true;

            // // 检查是否有隐藏按钮被激活
            // hiddenButtons.forEach(button => {
            //     if (button.getAttribute('active') === 'true') {
            //         shouldHideButtons = false; // 不隐藏按钮
            //     }
            // });

            if (shouldHideButtons) {
                // 隐藏所有隐藏按钮
                hiddenButtons.forEach(button => {
                    if (button.getAttribute('data-visible') != 'true') {
                        button.style.opacity = '0'; // 隐藏按钮
                        button.removeAttribute('active'); // 移除激活状态标记
                    }
                });

                // 隐藏 sidebar-module 侧边栏
                document.getElementById('sidebar-module').classList.remove('visible');
            }

            // 阻止点击事件冒泡
            event.stopPropagation();
        });

        // 为侧边栏中的每个列表项添加点击事件监听器
        document.querySelectorAll('#sidebar-module li').forEach(item => {
            item.addEventListener('click', function () {
                const activeButton = document.querySelector('.hidden-button[active="true"]');
                if (activeButton) {
                    if (this.textContent.trim() === 'DELETE') {
                        // 如果选择删除，重置按钮状态
                        activeButton.innerHTML = '+';
                        activeButton.style.backgroundColor = '#555';
                        activeButton.setAttribute('data-visible', 'false');
                        activeButton.classList.remove('draggable');
                        activeButton.classList.remove('drag-over');
                        activeButton.setAttribute('draggable', 'false');
                        activeButton.style.opacity = '0';
                    } else {
                        // 设置按钮内容并使其可拖动
                        const img = this.querySelector('img').cloneNode(true);
                        activeButton.innerHTML = '';
                        activeButton.appendChild(img);
                        activeButton.style.opacity = '1';
                        activeButton.style.backgroundColor = '#55555500';
                        activeButton.setAttribute('data-visible', 'true');
                        activeButton.classList.add('draggable');
                        makeDraggable(activeButton);
                    }
                }
                // 移除激活状态并隐藏侧边栏
                activeButton.removeAttribute('active');
                document.getElementById('sidebar-module').classList.remove('visible');
            });
        });

        let dragged;

        // 使元素可拖动的函数
        function makeDraggable(element) {
            element.setAttribute('draggable', 'true');
            element.addEventListener('dragstart', dragStart);
            element.addEventListener('dragend', dragEnd);
        }

        // 拖动开始时的处理函数
        function dragStart(e) {
            dragged = this;
            e.dataTransfer.setData('text/plain', this.id);
            setTimeout(() => {
                this.style.opacity = '0.5';
            }, 0);
        }

        // 拖动结束时的处理函数
        function dragEnd(e) {
            this.style.opacity = '1';
        }

        // 为所有hidden-button添加拖放相关的事件监听器
        const hiddenButtons1 = document.querySelectorAll('.hidden-button');
        hiddenButtons1.forEach(button => {
            button.addEventListener('dragover', dragOver);
            button.addEventListener('dragenter', dragEnter);
            button.addEventListener('dragleave', dragLeave);
            button.addEventListener('drop', drop);
        });

        // 拖动经过目标元素时的处理函数
        function dragOver(e) {
            e.preventDefault();
            this.classList.add('drag-over');
        }

        // 拖动进入目标元素时的处理函数
        function dragEnter(e) {
            e.preventDefault();
            if (this !== dragged) {
                this.classList.add('droppable');
            }
        }

        // 拖动离开目标元素时的处理函数
        function dragLeave(e) {
            this.classList.remove('droppable');
            this.classList.remove('drag-over');
        }

        // 在目标元素上释放时的处理函数
        function drop(e) {
            e.preventDefault();
            this.classList.remove('droppable');

            if (dragged !== this) {
                // 保存原始按钮的状态
                const draggedContent = dragged.innerHTML;
                const draggedVisible = dragged.getAttribute('data-visible');
                const draggedOpacity = dragged.style.opacity;
                const draggedBackgroundColor = dragged.style.backgroundColor;

                // 重置原始按钮到初始状态
                dragged.innerHTML = '+';
                dragged.removeAttribute('draggable');
                dragged.classList.remove('drag-over');
                dragged.setAttribute('data-visible', 'false');
                setTimeout(() => {
                    dragged.style.opacity = '0';
                }, 0);
                dragged.style.backgroundColor = '#555';

                // 更新目标按钮
                this.innerHTML = draggedContent;
                this.setAttribute('data-visible', draggedVisible);
                this.style.backgroundColor = draggedBackgroundColor;
                this.style.opacity = '1';  // 确保新位置的按钮完全不透明

                // 调试日志
                console.log('Target button updated:', this);

                if (this.textContent.trim() !== '+') {
                    makeDraggable(this);
                } else {
                    this.removeAttribute('draggable');
                    this.removeAttribute('drag-over');
                }
            }
        }

        // 为每个hidden-button添加唯一id
        hiddenButtons1.forEach((button, index) => {
            button.id = `hidden-button-${index}`;
        });

    </script>

    <script src="renderer.js"></script>
</body>

</html>

<!-- 修改这个代码，在左边5个InputBtn和右边5个OutputBtn之间，分别添加均匀分布的8个hidden-button，默认设置为 -->